<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		
		<view class="refund-box">
			<view class="refund-row">
				<u-cell-group :border="false">
					<u-cell title="订单编号" :value="order.order_sn" titleStyle="font-size:26rpx"></u-cell>
					<u-cell title="退款金额" titleStyle="font-size:26rpx">
						<view slot="value">
							<input type="number" v-model="post_data.money" class="refund-input" placeholder="退款金额"/>
						</view>
					</u-cell>
				</u-cell-group>
				
				<view class="refund-item">
					<view class="title">退款说明</view>
					<view class="content">
						<textarea  class="text" v-model="post_data.content" placeholder="申请退款的说明"></textarea>
					</view>
				</view>
				<view class="refund-item">
					<view class="title">相关图片</view>
					<view class="upload-box">
						<my-u-upload
							:fileList="file_list1"
							@afterRead="afterRead"
							@delete="deletePic"
							multiple
							name="1"
							width="100"
							height="100"
							:maxCount="20"
							:previewFullImage="true"
						></my-u-upload>
					</view>
				</view>
			</view>
			<view class="refund-btn">
				<button class="my-but-primary" text="" @click="submit()">确定提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import $file from "@/common/file"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'申请售后',
				file_list1:[],
				comment_label:[],
				order:[],
				is_retainer:0,			//是否订金订单，0不是 1是
				post_data:{
					order_id:0,
					content:"",
					images:'',
					money:0,
				}
			}
		},
		onLoad(option){
			if(option.id!=null || option.cid!=null){
				this.post_data.order_id=option.id
				this.initData()
			}else{
				this.$c.error('缺少参数','index/index')
			}
		},
		onShow(){
		},
		methods: {
			initData(){
				this.$u.api.orderInfo({order_id:this.post_data.order_id}).then(res=>{
					this.order=res.data.order;
					this.is_retainer=this.order.is_retainer;
					// 订金订单，并且已经付了订金
					if(this.is_retainer==1 && this.order.retainer_pay_status==1){
						this.post_data.money=this.order.retainer_first_fee;
					}else{
						this.post_data.money=this.order.money	
					}
				})
			},
			//删除图片
			deletePic(event) {
				this[`file_list${event.name}`].splice(event.index, 1)
			},
			//上传图片
			async afterRead(event){
				this[`file_list${event.name}`]= await $file.multipleUpload(event,this[`file_list${event.name}`])
			},
			//提交订单
			submit(){
				if(this.post_data.content===""){
					this.$c.error('请输入退款说明')
					return false
				}
				
				if(this.post_data.money<=0){
					this.$c.error('退款金额必须大于0元')
					return false
				}
				
				let imgs=[]
				this.file_list1.map((item) => {
					imgs.push(item.url)
				})
				this.post_data.images=imgs.join(',')
				//上传凭证
				this.$u.api.orderRefund (this.post_data).then(res=>{
					this.$c.success('提交成功！','order/detail/index?id='+this.post_data.order_id,4)
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $u-bg-color;
	}
	.refund-box{
		font-size: 26rpx;
	}
	.refund-row{
		padding: 15rpx;
		position: relative;
		margin-bottom: 20rpx;
		overflow: hidden;
		background-color: #fff;
	}
	.refund-row .upload-box{
		margin: 30rpx auto;
	}
	.refund-item{
		padding: 20rpx;
	}
	.refund-item .content{
		padding: 20rpx;
		border: 1px solid $u-border-color;
		border-radius: 10rpx;
	}
	.refund-item .content .text{
		font-size:26rpx;
		height: 400rpx;
		width: 100%;
	}
	.refund-item .title{
		margin: 20rpx auto;
	}
	.refund-item .upload-box{
		margin-bottom: 0rpx;
	}
	.refund-btn{
		padding: 20rpx 30rpx;
	}
	.refund-input{
		width: 200rpx;
		border: 1px solid $u-border-color;
		padding: 10rpx 30rpx;
		text-align: right;
		border-radius: 10rpx;
	}
</style>
